{% load crispy_forms_filters %}
{% load i18n %}
{% load l10n %}
{% load settings_values %}

{% aws_enabled as aws_active %}

<div class="upload-field mb-1">
  <label class="form-label custom-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
  {% if aws_active %}
    <img src="{{ file.get_url }}" style="max-width: 100px; max-height: 100px;"/>
    <input type="file" class="form-control d-none file-input" value="{{ field.value }}">
    <input class="file-id d-none" id="{{ field.id_for_label }}" name="{% if field.name|wordcount > 1 %}{{ field.name|slugify }}{% else %}{{ field.name }}{% endif %}" value="{{ field.value|default_if_none:"" }}">

    {% if file %}
      <p class="mt-1 mb-1">{% translate "Current file:" %}<span class="file-name">{{ file.name }}</span>.</p>
    {% endif %}
    <a class="btn btn-sm btn-primary mb-3 upload-button">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
        <polyline points="7 9 12 4 17 9"></polyline>
        <line x1="12" y1="4" x2="12" y2="16"></line>
      </svg>
      {% translate "Upload" %}
    </a>
  {% else %}
    <div class="alert alert-warning" role="alert">
      <div class="alert-icon">
        <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"
          class="icon alert-icon icon-2">
          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
          <path d="M12 8v4" />
          <path d="M12 16h.01" />
        </svg>
      </div>
      {% translate "File storage has not been set up. Please read the docs." %} <a class="alert-link" href="https://docs.chiefonboarding.com/config/objectstorage.html">{% translate "Set up object storage" %}</a>
    </div>
  {% endif %}
</div>
